<template>
	<view class="pinj">
		<view class="yhd">


			<u-tabs :list="list2" :current="tabsId" @click="tabsOn" :scrollable="true"></u-tabs>
		</view>
		<swiper :current="tabsId" @change="wzhd" :style="{ height: wsyData * 250 + 'px'}">
			<swiper-item v-for="(tab, index) in list2" :key="index">
				<view class="itemdata" v-if="tab.listdata.length>0">
					<view class="itd" v-for="(item,ndex) in listdata" :key="ndex">

						<view class="album">
							<view class="album__avatar">
								<view class="zuo">
									<!-- // {{item.face|avatarfilter}} -->
									<image :src="item.face|avatarfilter" mode="" style="width: 42px;height: 42px;">
									</image>
									<view class="sji">
										<u--text style="margin-left: 12px;" :text="item.username" type="primary" bold
											size="17"></u--text>
										<!-- <text>duiji </text> -->
										<u-rate :count="count" v-model="item.score"></u-rate>
									</view>


								</view>
								<view class="you">
									<!-- <text style="color: #f35959;">好评</text>
									<text style="color: #ff832a;">中评</text>
									<text style="color: #9d9195;">差评</text> -->
									<text>{{item.date |datafilter}}</text>

								</view>
							</view>
							<view class="album__content">

								<u--text margin="0 0 8px 0" :text="item.first.content"></u--text>
								<u-album :urls="item.first.img" ></u-album>
							</view>
						</view>




					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="order">
					</u-empty>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		base_Url
	} from '../../../utils/Url'


	export default {
		data() {
			return {
				albumWidth: 0,
				urls2: [
					"/static/logo.png",
					"/static/logo.png",
					"/static/logo.png",

				],
				xxvalue: 1,
				count: 5,
				tabsId: 0,
				listdata: [],
				list2: [{
						name: '全部',
						badge: {
							value: 0
						},
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 0,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}, {
							image: "/static/logo.png",
							fwjs: "日常保洁2",
							yytime: "2023-10-17 23:00",
							fwstatus: 0,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}, ]

					}, {
						name: '好评',
						badge: {
							value: 0
						},
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 1,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}]

					},
					{
						name: '中评',
						badge: {
							value: 0
						},
						listdata: [{
							image: "/static/logo.png",
							fwjs: "日常保洁",
							yytime: "2023-10-17 23:00",
							fwstatus: 2,
							address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

						}]

					}, {
						name: '差评',
						badge: {
							value: 0
						},
						listdata: [{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 0,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							}, {
								image: "/static/logo.png",
								fwjs: "日常保洁2",
								yytime: "2023-10-17 23:00",
								fwstatus: 0,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							},
							{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 1,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							},
							{
								image: "/static/logo.png",
								fwjs: "日常保洁",
								yytime: "2023-10-17 23:00",
								fwstatus: 2,
								address: "北京市北京市昌平区北京市昌平区回龙观街道金燕龙科研楼"

							}

						]

					}
				]
			}
		},
		computed: {
			wsyData() {
				return this.listdata.length
			}

		},
		onLoad() {
			const aa = uni.getStorageSync("userinfo")
			console.log("aa", JSON.parse(aa).id);
			this.getList(JSON.parse(aa).id, 0)
			this.getcounts(JSON.parse(aa).id)
		},
		created() {
			this.list2[0].badge.value = this.list2[0].listdata.length
		},
		watch: {
			tabsId(news, old) {
				console.log(news);
				const aa = uni.getStorageSync("userinfo")
				console.log("aa", JSON.parse(aa).id);
				this.getList(JSON.parse(aa).id, news)
			}
		},
		filters: {
			avatarfilter(e) {
				// console.log('收到的参数', e);
				if (typeof e === 'string') {
					const updatedUrl = e.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);
					return updatedUrl;
				} else {
					console.warn('e is not a valid string:', e);
					return ''; // 或者处理为默认值
				}

			},
			scorefilter(e) {
				switch (e) {
					case 1:
						return "差";
					case 2:
						return "较差";
					case 3:
						return "一般";
					case 4:
						return "好";

					default:
						return "最好"; // 如果没有选定评分，显示空
				}
			},
			datafilter(e) {
				const date = new Date(e);

				// 获取年份、月份、日期、小时和分钟
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');

				// 格式化日期
				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}`;
				return formattedDate
			},
			Fixed(e) {
				return parseFloat(e).toFixed(2);
			}
		},
		methods: {
			getcounts(e) {
				this.$http.get('/commentForm/cycount', {
					params: {
						userid: e
					}

				}).then(res => {
					console.log('res', res.result);
					res.result.forEach((obj, index) => {
						this.list2[index].badge.value = res.result[
							index]; // 将 numbers 数组的值赋给每个对象的 `number` 字段
					});

				})
			},
			getList(e, a) {
				this.$http.get('/commentForm/cysjSearchs', {
					params: {
						userid: e,
						comprehensiveScore: a
					}

				}).then(res => {
					console.log('res', res.result);
					// this.$http.post('/commentForm/getcount', {
					// 	serviceId: e.item,
					// 	comprehensiveScore: a
					// }).then(res => {
					// 	console.log('res', res);
					// 	// this.labelList[].number = res.result
					// })

					this.listdata = res.result.map(res => {
						// console.log(res.image[0].url);
						const bb = res.image
						const aa = bb.map(item => {
							return item.url.replace(/^http:\/\/127\.0\.0\.1:8080/, base_Url);

						})
						// console.log(111, aa);
						return {
							id: res.id,
							username: res.userDetail.username,
							face: JSON.parse(res.userDetail.avatar).url,
							date: res.createTime,
							// spec:
							score: res.comprehensiveScore,
							first: {
								content: res.feel,
								img: aa

							}
						}
					})
					this.list2[a].number = this.ratingsList.length
				})
			},
			tabsOn(e) {
				//点击的时候切换的函数
				this.tabsId = e.index;
				// console.log(e);
			},

			wzhd(e) { //滑动切换的时候调用的函数
				this.tabsId = e.detail.current
				// console.log(e.detail.current);
			},

		}
	}
</script>

<style lang="scss">
	.pinj {
		.yhd {
			display: flex;
			// flex-direction: column;
			justify-content: center;
		}

		.itemdata {
			.itd {
				margin: 8px;
				padding: 4px 8px;

				.album {
					.album__avatar {
						display: flex;
						justify-content: space-between;

						.zuo {
							display: flex;
							margin-bottom: 4px;

							.sji {
								margin-left: 8px;
								display: flex;
								flex-direction: column;
								align-items: center;
							}
						}

						.you {}
					}
				}

			}
		}

	}
</style>